<script setup lang="ts">
import {ref, watch} from 'vue';
import useCategoryStore from '@/store/modules/category'
import {reqHasSpu} from '@/api/product/spu'
import { HasSpuResponseData, Records, SpuData} from "@/api/product/spu/type.ts";

//引入分类组件
import SpuForm from "./spuForm.vue"
import SkuForm from "./skuForm.vue"

let categoryStore = useCategoryStore()
//场景的数据
let scene = ref<number>(0)
//当前页码
let pageNo = ref<number>(1)
//每页显示条数
let pageSize = ref<number>(3)

let records = ref<Records>([])

//总条数
let total = ref<number>(0)

//获取SpuForm组件的实例对象
let spu = ref<any>()

watch(() => categoryStore.c3Id, async () => {
  records.value = []
  //如果没有三级分类ID，就不需要发送请求
  if (!categoryStore.c3Id) return
  //获取某一个三级分类下全部已有的SPU
  await getHasSPU()

}, {immediate: true})
//获取某一个三级分类下全部已有的SPU
const getHasSPU = async (pager = 1) => {
  //修改当前页码
  pageNo.value = pager
  let result: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id)
  console.log(result)
  if (result.code === 200) {
    records.value = result.data.records
    total.value = result.data.total
  }
}
const changeSize = () => {
  getHasSPU()
}

//添加SPU
const addSpu =() => {
  //切换为场景1：添加SPU
  scene.value = 1
  //点击添加SPU按钮,调用子组件的方法初始化数据
  spu.value.initAddSpu(categoryStore.c3Id)
}
//添加一个新的SPU初始化请求方法

const changeScence = (obj:any) => {
  scene.value = obj.flag
  if (obj.params == 'update') {
    //更新留在当前页
    getHasSPU(pageNo.value)
  } else {
    //添加留在第一页
    getHasSPU()
  }
}
//修改SPU
const updateSpu = (row:SpuData) => {
  //切换为场景1：修改SPU
  scene.value = 1
  //将SPU的数据传递给SpuForm组件
  spu.value.initHasSpuData(row)
}
</script>

<template>
  <div>
    <Category :scene="scene"></Category>
    <el-card style="margin: 10px 10px">
      <div v-show="scene ===0">
        <el-button type="primary" size="default" icon="Plus" :disabled="!categoryStore.c3Id" @click="addSpu">添加SPU</el-button>
        <el-table border style="margin: 10px 10px" :data="records">
          <el-table-column
              label="序号"
              type="index"
              align="center"
              width="80px"
          ></el-table-column>
          <el-table-column label="SPU名称" prop="spuName"></el-table-column>
          <el-table-column label="SPU描述" prop="description"></el-table-column>
          <el-table-column label="SPU操作">
            <!-- row:即为已有的SPU对象 -->
            <template #="{ row, $index }">
              <el-button
                  type="primary"
                  size="small"
                  icon="Plus"
                  title="添加SKU"
              ></el-button>
              <el-button
                  type="warning"
                  size="small"
                  icon="Edit"
                  title="修改SPU"
                  @click="updateSpu(row)"
              ></el-button>
              <el-button
                  type="info"
                  size="small"
                  icon="View"
                  title="查看SKU列表"
              ></el-button>
              <el-popconfirm :title="`你确定删除${row.spuName}?`" width="200px">
                <template #reference>
                  <el-button
                      type="danger"
                      size="small"
                      icon="Delete"
                      title="删除SPU"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加SPU的弹窗 -->
      <SpuForm v-show="scene ===1" @change-scence="changeScence" ref="spu"></SpuForm>
      <!-- 添加SKU的弹窗 -->
      <SkuForm v-show="scene===2"></SkuForm>
    </el-card>
    <!-- 分页器 -->
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7, 9]"
        :background="true"
        layout=" prev, pager, next, jumper,->, sizes,total"
        :total="total"
        @current-change="getHasSPU"
        @size-change="changeSize"
    />
  </div>
</template>

<style scoped lang="scss">

</style>